<template>
  <div>
    <h2>{{ msg }}</h2>
    <hr>
    <h3>{{ count }}</h3>
<!--    <h3>{{ $store.state.a.count }}</h3>-->
    <div>
      <button @click="$store.commit('add',10)">+</button>
      <button @click="reduce">-</button>
    </div>
    <div>
      <button @click="addAction">+</button>
      <button @click="reduceAction">-</button>
    </div>
  </div>
</template>

<script>
  //这边的文件引入就是个坑使用@引入不成功
  import store from '../../vuex/store';
  //通过mapState的对象来赋值
  //引入mapMutations之后，直接在methods中使用数组的形式引入方法就可以直接使用了
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
    export default {
        name:"Count",
        data(){
          return {
            msg : '我是count组件'
          }
        },
      //1:使用计算属性可以对值进行初始化,我们利用这种特性把仓库中的值拿出来然后进行处理输出
      // computed:{
      //     count(){
      //       return this.$store.state.count;
      //     }
      // },
      //通过mapState的对象来赋值
      // computed:mapState({
      //   //这里使用的是ES6的箭头函数来给count赋值
      //   count:state => state.count
      // }),
      //三，通过mapState的数组来赋值
      computed:{
          ...mapState(['count']),
          // count(){
          //   return this.$store.getters.count;
          // },
          // ...mapGetters(['count'])
        count(){
            return this.$store.state.a.count
        }
      },
      store,
      methods:{
        ...mapMutations(['add','reduce']),
        ...mapActions(['addAction','reduceAction'])
      }
    }
</script>

<style scoped>

</style>
